<template>
  <el-dropdown
    trigger="click"
    v-model:visible="dropdownVisible"
    placement="bottom"
    @command="handleThemeChange"
    class="bg-transparent border-0 text-blue-2 hover:bg-blue-500/40 dark:hover:bg-blue-800/40 p-2 rounded transition h-fill-available cursor-pointer">
    <font-awesome-icon :icon="currentThemeConfig.icon" class="w-5 h-5 focus:outline-none" />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="theme in themeConfig"
          :key="theme.name"
          :command="theme.name"
          :disabled="currentTheme === theme.name">
          {{ theme.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref, inject, computed } from 'vue'
// 使用ElIcon组件和图标名称字符串，不再需要显式导入图标
import type { ThemeName, ThemeServiceType } from '@/utils/themeService'
import { themeConfig } from '@/themes'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 从依赖注入中获取主题服务
const themeService = inject<ThemeServiceType>('themeService')
if (!themeService) {
  throw new Error('ThemeService not provided')
}

// 主题列表
const themes = themeService.getThemeList()

// 当前主题
const currentTheme = computed<ThemeName>(() => themeService.getThemeRef().value)

// 当前主题配置
const currentThemeConfig = computed(() => themeService.getThemeConfig(currentTheme.value))

// 下拉菜单可见性
const dropdownVisible = ref(false)

// 处理主题变更
const handleThemeChange = (theme: ThemeName) => {
  themeService.setTheme(theme)
  dropdownVisible.value = false
}
</script>

<style scoped></style>
